<template>
  <all-header :title="$route.meta.title" />
  <div class="tab">
    <van-tabs v-model:active="tab" title-active-color="black" color="black">
      <van-tab name="one" title="全部"></van-tab>
      <van-tab name="two" title="我赠与的"></van-tab>
      <van-tab name="three" title="收到赠与"></van-tab>
    </van-tabs>
  </div>
  <div class="list">
    <van-pull-refresh
      v-model="refreshloading"
      @refresh="onRefresh"
      class="refresh"
    >
      <van-empty
        description="什么都没有"
        v-if="giveList.length < 1 && !refreshloading && !loading"
      />
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了, 拉我刷新"
        @load="onLoad"
      >
        <van-cell v-for="item in giveList" :key="item.id" class="item" @click="$router.push({name: 'givedetail', params:{id:item.id}})">
          <div class="content">
            <div class="left">
              <img :src="setting.file_url + item.photo" alt="" />
              <div class="name_num">
                <div class="name">{{item.name}}</div>
                <div class="num"><span>编号:</span>{{ item.no }}</div>
              </div>
            </div>
            <div class="right">
              <div class="todetail">
                <div class="text">查看详情</div>
                <img src="../../assets/image/my/mores.png" alt="" />
              </div>
              <div class="date">{{item.created_at}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import marketStore from "../../store/market";
import commonStore from '../../store/common'
import {useRoute} from 'vue-router'

const route = useRoute()
const common = commonStore()
const market = marketStore();
let refreshloading = ref(false);
let loading = ref(false);
let finished = ref(false);
let giveList = ref([]);
let tab = ref(route.params.type )

const setting = computed(() => common.setting)

const param = ref({
  page: 1,
  type: "all",
});

const getGiveList = () => {
  loading.value = true
  refreshloading.value = false
  finished.value = false 
  market.getGiveList(param.value).then((res) => {
    loading.value = false
    refreshloading.value = false
    if(param.value.page != res.last_page) { 
      param.value.page ++
    } else { 
      finished.value = true
    }
    giveList.value.push(...res.data)
  }).catch(() => { 
    loading.value = false
    refreshloading.value = false
    finished.value = true
  })
}

const onRefresh = () => { 
  giveList.value = []
  refreshloading.value = true
  param.value.page = 1
  param.value.type = 'all'
  onLoad()
}

const onLoad = () => {
  if(tab.value == 'two') { 
    param.value.type = 'oneself'
  } else if(tab.value == 'three') { 
    param.value.type = 'receive'
  } else { 
    param.value.type = 'all'
  }
  getGiveList()
}

watch(tab, (newVal) => { 
  giveList.value = []
  param.value.page = 1
  param.value.type = newVal
  onLoad()
});

</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  top: 0.7692rem;
  z-index: 999;
  width: 100%;
}
.list {
  width: 100%;
  height: 88%;
  padding-top: 20%;
}
.item {
  padding: 0.4rem;
}
.refresh {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.content {
  img {
    width: 1.5385rem;
    height: 1.5385rem;
    margin-right: 0.1923rem;
    border-radius: 0.1923rem;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    font-weight: bold;
    .name {
      font-size: 0.2885rem;
      padding-bottom: 0.0962rem;
    }
    .num {
      span {
        color: #9a9a9a;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .price {
      font-weight: bold;
      font-size: 0.3846rem;
    }
    .date {
      font-weight: bold;
    }
  }
  .todetail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9a9a9a;
    padding-bottom: .1923rem;
    img {
      width: 0.2885rem;
      height: 0.2885rem;
    }
  }
}
</style>